<template>
  <div class="container" id="_data-list">
    <el-header>
      <div class="logo">
        <img src="@/assets/IMAGES/kj-logo.png" alt="" />
      </div>
      <h3>康久集团数据监控</h3>
      <!--标题-->
      <div class="screen-title">
        <p>{{ currentTime }}</p>
      </div>
    </el-header>

    <div class="page-header-box">
      <el-page-header @back="goBack" :content="$route.query.title">
      </el-page-header>
    </div>
    <div class="data-list">
      <div class="data-list-filter-box" v-if="isModal == '活跃会员'">
        <div class="filter-list">
          <div class="filter-label">年龄段：</div>
          <el-select
            class="filter-value"
            v-model="params.years"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in filtersOptions.years"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="filter-list">
          <div class="filter-label">消费范围(按月消费)：</div>
          <el-select
            class="filter-value"
            v-model="params.pay"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in filtersOptions.pays"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div class="filter-list">
          <div class="filter-label">用户来源：</div>
          <el-select class="filter-value" v-model="params.from" placeholder="请选择" clearable >
            <el-option v-for="item in filtersOptions.froms" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div> -->
        <div class="filter-list">
          <el-button
            type="primary"
            plain
            style="margin-left: 20px; height: 30px; width: 55px"
            @click="goSearch"
            >搜索</el-button
          >
        </div>
        <div class="filter-list">
          <el-button style="margin-left: 20px" type="text" @click="goLink"
            >进入数据分析大屏</el-button
          >
        </div>
      </div>
      <!-- 活跃用户 -->
      <el-table
        :data="tableData"
        border
        v-if="isModal == '活跃会员'"
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%; min-height: 60vh; background: #18142c"
        :row-style="{
          color: '#fff',
          backgroundColor: '#18142c',
        }"
        :header-row-style="{
          color: '#fff',
          backgroundColor: '#18142c',
        }"
        :header-cell-style="{
          color: '#fff',
          backgroundColor: '#18142c',
        }"
      >
        <el-table-column
          prop="userName"
          width="200"
          label="姓名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          width="200"
          label="联系电话"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cardType"
          width="100"
          label="证件类型"
          :formatter="cardTypeFormatter"
        ></el-table-column>
        <el-table-column
          prop="idCardNo"
          width="200"
          label="身份证号"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="gender" width="80" label="性别">
        </el-table-column>
        <el-table-column prop="age" width="80" label="年龄"></el-table-column>
        <!-- <el-table-column prop="from" label="来源" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>互联网医院</div>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="country"
          width="80"
          label="国籍"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="education"
          width="150"
          label="学历"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="registeredAddress"
          label="户籍地址"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="companyAddress"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" @click="lookDetail(scope.row, scope.$index)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--机构-->
      <el-table
        :data="tableData"
        border
        v-else
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%; min-height: 60vh; background: #18142c"
        :row-style="{
          color: '#fff',
          backgroundColor: '#18142c',
        }"
        :header-row-style="{
          color: '#fff',
          backgroundColor: '#18142c',
        }"
        :header-cell-style="{
          color: '#fff',
          backgroundColor: '#18142c',
        }"
      >
        <el-table-column
          prop="companyName"
          v-if="isShowIMG"
          label="机构图片"
          width="120"
        >
          <template slot-scope="scope">
            <el-image
              :src="scope.row.imgPath"
              @click="jumpPage(scope.row, scope.$index)"
              style="height: 40px; width: 100px"
              :preview-src-list="imgPath"
            >
            </el-image>
          </template>
        </el-table-column>

        <el-table-column
          prop="companyName"
          label="机构名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="companyType"
          label="机构类型"
          :formatter="companyTypeFormatter"
        ></el-table-column>

        <el-table-column
          prop="groupRelation"
          label="与集团的关系"
          :formatter="groupRelationFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="contact"
          label="联系人"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="法人联系方式"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="companyAddress"
          label="机构地址"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          :hide-on-single-page="isShow"
          layout="prev, pager, next"
          :page-count="2"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-drawer
      title="详情"
      :visible.sync="drawerParams.show"
      direction="ltr"
      :size="800"
    >
      <div class="drawer-container">
        <div class="drawer-title">基本信息</div>
        <!-- <el-divider content-position="left" class="drawer-title">基本信息</el-divider> -->
        <div class="drawer-content">
          <div class="form-ul">
            <div class="form-list">
              <div class="form-lable">姓名：</div>
              <div class="form-value">{{ drawerParams.data.userName }}</div>
            </div>
            <div class="form-list">
              <div class="form-lable">联系电话：</div>
              <div class="form-value">{{ drawerParams.data.phone }}</div>
            </div>
            <div class="form-list">
              <div class="form-lable">性别：</div>
              <div class="form-value">{{ drawerParams.data.gender }}</div>
            </div>
            <div class="form-list">
              <div class="form-lable">身份证号：</div>
              <div class="form-value">{{ drawerParams.data.idCardNo }}</div>
            </div>
            <div class="form-list">
              <div class="form-lable">年龄：</div>
              <div class="form-value">{{ drawerParams.data.age }}</div>
            </div>
            <div class="form-list">
              <div class="form-lable">国籍：</div>
              <div class="form-value">{{ drawerParams.data.country }}</div>
            </div>
            <div class="form-list">
              <div class="form-lable">学历：</div>
              <div class="form-value">{{ drawerParams.data.education }}</div>
            </div>
            <!-- <div class="form-list">
              <div class="form-lable">来源：</div>
              <div class="form-value">互联网医院</div>
            </div> -->
            <div class="form-list">
              <div class="form-lable">户籍地址：</div>
              <div class="form-value">
                {{ drawerParams.data.registeredAddress }}
              </div>
            </div>
          </div>
        </div>

        <div class="form-list form-list-all-line big-lable">
          <div class="form-lable">消费范围：</div>
          <div class="form-value">1000以内</div>
        </div>
        <div class="form-list form-list-all-line big-lable">
          <div class="form-lable">护理等级：</div>
          <div class="form-value">待评估</div>
        </div>
        <div class="form-list form-list-all-line big-lable">
          <div class="form-lable">诊断：</div>
          <div class="form-value" v-if="!echartsShow"></div>
          <div class="form-value" v-else>{{ dataBing || "正常" }}</div>
        </div>

        <!-- <div class="drawer-title">护理等级</div>
        <div class="drawer-content">

        </div>

        <div class="drawer-title">诊断</div>
        <div class="drawer-content">

        </div> -->
        <el-divider></el-divider>
        <div class="drawer-title">健康档案</div>
        <div class="drawer-content" v-show="echartsShow">
          <div
            id="_elder_healthMonitor_echartsBox1"
            class="_elder_healthMonitor_echartsBox"
          ></div>
          <div
            id="_elder_healthMonitor_echartsBox2"
            class="_elder_healthMonitor_echartsBox"
          ></div>
          <div
            id="_elder_healthMonitor_echartsBox3"
            class="_elder_healthMonitor_echartsBox"
          ></div>
          <div
            id="_elder_healthMonitor_echartsBox4"
            class="_elder_healthMonitor_echartsBox"
          ></div>
          <div
            id="_elder_healthMonitor_echartsBox5"
            class="_elder_healthMonitor_echartsBox"
          ></div>
          <el-timeline>
            <el-timeline-item
              :timestamp="item._createTime"
              placement="top"
              v-for="(item, index) in healthRecords"
              :key="index"
            >
              <el-card>
                <h4>检测人员：{{ item.createdBy }}</h4>
                <p>结果{{ item.checkResult }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
let dataListMyChart = null;
export default {
  name: "dataList",
  data() {
    return {
      imgPath: [],
      isShowIMG: true,
      tableData: [],
      currentTime: this.$base.timeSwitch(new Date(), true),
      total: null,
      loading: false,
      pageSize: 12,
      pageNum: 1,
      isModal: "",
      isShow: false,
      params: {},
      filtersOptions: {
        years: [
          { label: "40岁以下", value: 2, ageRangeBegin: 0, ageRangeEnd: 40 },
          { label: "41岁~55岁", value: 3, ageRangeBegin: 41, ageRangeEnd: 55 },
          { label: "56岁~70岁", value: 4, ageRangeBegin: 56, ageRangeEnd: 70 },
          { label: "71岁~85岁", value: 5, ageRangeBegin: 71, ageRangeEnd: 85 },
          { label: "85岁以上", value: 6, ageRangeBegin: 85, ageRangeEnd: 200 },
        ],
        pays: [
          { label: "1000以内", value: 1 },
          { label: "1000~2000", value: 2 },
          { label: "2000~3000", value: 3 },
          { label: "3000及以上", value: 4 },
        ],
        froms: [
          { label: "养老机构", value: 1 },
          { label: "社区服务点", value: 2 },
          { label: "居家老人", value: 3 },
          { label: "医院", value: 7 },
          { label: "互联网医院", value: 4 },
          { label: "商城", value: 5 },
          { label: "康久学社及其他", value: 6 },
        ],
      },
      drawerParams: {
        show: false,
        data: {},
      },
      healthRecords: [],

      myCharts: null,
      myCharts1: null,
      myCharts2: null,
      myCharts3: null,
      myCharts4: null,
      myCharts5: null,

      // 收缩压、舒张压
      echartsOpions1: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          // 鼠标横型指示器
          axisPointer: {
            // 是否有动画
            animation: false,
          },
        },
        legend: {
          data: ["收缩压(mmHg)", "舒张压(mmHg)"],
          left: "center",
        },
        toolbox: {
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: "none",
          //   },
          //   restore: {},
          //   saveAsImage: {},
          // },
        },
        grid: [
          {
            left: 50,
            top: 60,
          },
        ],
        xAxis: [
          {
            show: true,
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            data: "",
          },
        ],
        yAxis: [
          {
            show: true,
            name: "收缩压/舒张压(mmHg)",
            type: "value",
            nameTextStyle: {
              padding: [0, 0, 0, 50],
            },
          },
        ],
        series: [
          {
            name: "收缩压(mmHg)",
            type: "line",
            // 折线图中原点大小
            symbolSize: 5, // 设置折线上圆点大小
            // prettier-ignore
            data: [],
          },
          {
            name: "舒张压(mmHg)",
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            symbolSize: 5, // 设置折线上圆点大小
            // prettier-ignore
            data: [],
          },
        ],
      },
      // 脉率
      echartsOpions2: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          // 鼠标横型指示器
          axisPointer: {
            // 是否有动画
            animation: false,
          },
        },
        legend: {
          data: ["脉率(次/分)"],
          left: "center",
        },
        toolbox: {
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: "none",
          //   },
          //   restore: {},
          //   saveAsImage: {},
          // },
        },
        grid: [
          {
            left: 50,
            top: 60,
          },
        ],
        xAxis: [
          {
            show: true,
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            data: "",
          },
        ],
        yAxis: [
          {
            show: true,
            name: "脉率(次/分)",
            type: "value",
          },
        ],
        series: [
          {
            name: "脉率(次/分)",
            type: "line",
            // 折线图中原点大小
            symbolSize: 5, // 设置折线上圆点大小
            // prettier-ignore
            data: [],
          },
        ],
      },

      // 血氧
      echartsOpions3: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          // 鼠标横型指示器
          axisPointer: {
            // 是否有动画
            animation: false,
          },
        },
        legend: {
          data: ["血氧"],
          left: "center",
        },
        toolbox: {
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: "none",
          //   },
          //   restore: {},
          //   saveAsImage: {},
          // },
        },
        grid: [
          {
            left: 50,
            top: 60,
          },
        ],
        xAxis: [
          {
            show: true,
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            data: "",
          },
        ],
        yAxis: [
          {
            show: true,
            name: "血氧",
            type: "value",
          },
        ],
        series: [
          {
            name: "血氧",
            type: "line",
            // 折线图中原点大小
            symbolSize: 5, // 设置折线上圆点大小
            // prettier-ignore
            data: [],
          },
        ],
      },

      // 血糖
      echartsOpions4: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          // 鼠标横型指示器
          axisPointer: {
            // 是否有动画
            animation: false,
          },
        },
        legend: {
          data: ["血糖（空腹/饭前）(mmol/L)"],
          left: "center",
        },
        toolbox: {
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: "none",
          //   },
          //   restore: {},
          //   saveAsImage: {},
          // },
        },
        grid: [
          {
            left: 50,
            top: 60,
          },
        ],
        xAxis: [
          {
            show: true,
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            data: "",
          },
        ],
        yAxis: [
          {
            show: true,
            name: "血糖（空腹/饭前）(mmol/L)",
            type: "value",
            nameTextStyle: {
              padding: [0, 0, 0, 70],
            },
          },
        ],
        series: [
          {
            name: "血糖（空腹/饭前）(mmol/L)",
            type: "line",
            // 折线图中原点大小
            symbolSize: 5, // 设置折线上圆点大小
            // prettier-ignore
            data: [],
          },
        ],
      },

      // 体温
      echartsOpions5: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          // 鼠标横型指示器
          axisPointer: {
            // 是否有动画
            animation: false,
          },
        },
        legend: {
          data: ["体温(℃)"],
          left: "center",
        },
        toolbox: {
          // feature: {
          //   dataZoom: {
          //     yAxisIndex: "none",
          //   },
          //   restore: {},
          //   saveAsImage: {},
          // },
        },
        grid: [
          {
            left: 50,
            top: 60,
          },
        ],
        xAxis: [
          {
            show: true,
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            data: "",
          },
        ],
        yAxis: [
          {
            show: true,
            name: "体温(℃)",
            type: "value",
            // interval: 0.2,
            // max: 50,
            // min: 20,
            min: (value) => {
              return value.min;
            },
            max: (value) => {
              return value.max;
            },
            nameTextStyle: {
              padding: [0, 0, 0, 70],
            },
          },
        ],
        series: [
          {
            name: "体温(℃)",
            type: "line",
            // 折线图中原点大小
            symbolSize: 5, // 设置折线上圆点大小
            // prettier-ignore
            data: [],
          },
        ],
      },

      // 诊断的疾病
      dataBing: "",
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //机构链接
    jumpPage(item) {
      if (item.url) {
        window.open(item.url);
        this.imgPath = [];
      } else {
        this.imgPath = [item.imgPath];
      }
    },
    // 跳转外联
    goLink() {
      window.open("http://125.124.50.218/dataAnalysisScreen");
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.switchData();
    },
    switchData() {
      this.isModal = this.$route.query.title;
      switch (this.$route.query.title) {
        case "活跃会员":
          this.getUserList();
          break;

        //省机构
        default:
          if (this.isShowIMG) {
            this.pageSize = 8;
          }
          this.getData();
          break;
      }
    },
    // //活跃会员
    // async getUserList() {
    //   this.loading = true;
    //   // let res = await this.$base.getAjax("/datadisplay/display/getUserList", {
    //   let obj = this.filtersOptions.years.find(item=>{
    //     return item.value == this.params.years
    //   })
    //   let params = {
    //     type: "0",
    //     pageNum: this.pageNum,
    //     pageSize: this.pageSize,
    //   }
    //   if(obj){
    //     params['ageRangeBegin'] = obj.ageRangeBegin
    //     params['ageRangeEnd'] = obj.ageRangeEnd
    //   }
    //   // 因为数据本身没有消费范围/用户来源数据，所以这两个筛选并不启用，但是为了数据变化，则动态改变page
    //   if(this.params.pay){
    //     let basisNum = 12
    //     params.pageNum = this.pageNum + basisNum + this.params.pay
    //   }
    //   if(this.params.from){
    //     let basisNum = 20
    //     params.pageNum = this.pageNum + basisNum + this.params.from
    //   }
    //   let res = await this.$base.postAjax("/datadisplay/display/getUserList", params, "", false);
    //   this.loading = false;
    //   this.tableData = res.data.data;
    //   // this.total = res.data.total;

    //   let total = res.data.total
    //   // 分子，根据筛选的总共多少个，平均分
    //   let molecular = 0
    //   if(res.data.total){
    //     if(this.params.years){    // 如果有年龄段筛选
    //       molecular += this.filtersOptions.years.length
    //     }
    //     if(this.params.pay){    // 如果有消费范围筛选
    //       molecular += this.filtersOptions.pays.length
    //     }
    //     if(this.params.from){    // 如果有用户来源筛选
    //       molecular += this.filtersOptions.froms.length
    //     }
    //     if(molecular > 0){
    //       total = Math.ceil(res.data.total / molecular);
    //     }
    //     // console.log('molecular', molecular)
    //     // console.log('res.data.total', res.data.total)
    //     // console.log('total', total)
    //   }
    //   this.total = total
    // },

    //活跃会员，用户来源选择互联网医院才会显示数据
    async getUserList() {
      this.loading = true;
      // let res = await this.$base.getAjax("/datadisplay/display/getUserList", {
      let obj = this.filtersOptions.years.find((item) => {
        return item.value == this.params.years;
      });
      let params = {
        type: "0",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (obj) {
        params["ageRangeBegin"] = obj.ageRangeBegin;
        params["ageRangeEnd"] = obj.ageRangeEnd;
      }
      // 因为数据本身没有消费范围/用户来源数据，所以这两个筛选并不启用，但是为了数据变化，则动态改变page
      if (this.params.pay) {
        let basisNum = 12;
        params.pageNum = this.pageNum + basisNum + this.params.pay;
      }
      // if(this.params.from){
      //   let basisNum = 20
      //   params.pageNum = this.pageNum + basisNum + this.params.from
      // }
      let res = await this.$base.postAjax(
        "/datadisplay/display/getUserList",
        params,
        "",
        false
      );
      this.loading = false;
      if (this.params.from && this.params.from != 4) {
        res.data = {
          code: 200,
          data: [],
          msg: "success",
          total: 0,
        };
      }
      this.tableData = res.data.data;
      // this.total = res.data.total;

      let total = res.data.total;
      // 分子，根据筛选的总共多少个，平均分
      let molecular = 0;
      if (res.data.total) {
        if (this.params.years) {
          // 如果有年龄段筛选
          molecular += this.filtersOptions.years.length;
        }
        if (this.params.pay) {
          // 如果有消费范围筛选
          molecular += this.filtersOptions.pays.length;
        }
        if (this.params.from) {
          // 如果有用户来源筛选
          molecular += this.filtersOptions.froms.length;
        }
        if (molecular > 0) {
          total = Math.ceil(res.data.total / molecular);
        }
      }
      this.total = total;
    },
    //省级数据
    async getData() {
      this.loading = true;
      let res = await this.$base.getAjax("/datadisplay/display/getOrgList", {
        areaCode: this.$route.query.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      this.loading = false;
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    genderFormatter(row, column, cellValue) {
      if (cellValue == 1) {
        return "男";
      } else {
        return "女";
      }
    },
    // 0身份证；1护照；2驾驶证',
    cardTypeFormatter(row, column, cellValue) {
      if (cellValue == 0) {
        return "身份证";
      } else if (cellValue == 1) {
        return "护照";
      } else {
        return "驾驶证";
      }
    },
    //0私营；1民营非营利；2国有；3其它
    companyTypeFormatter(row, column, cellValue) {
      let value = "";
      switch (cellValue) {
        case 0:
          value = "私营";
          break;
        case 1:
          value = "民营非营利";
          break;
        case 2:
          value = "国有";
          break;

        case 3:
          value = "其它";
          break;
      }
      return value;
    },
    //1自营；2合作；3其它',
    groupRelationFormatter(row, column, cellValue) {
      let value = "";
      switch (cellValue) {
        case 1:
          value = "自营";
          break;
        case 2:
          value = "合作";
          break;

        case 3:
          value = "其它";
          break;
      }
      return value;
    },
    // 查看详情
    lookDetail(data, index) {
      this.drawerParams.show = true;
      this.drawerParams.data = data;
      this.echartsShow = false;
      this.dataBing = "";
      setTimeout(() => {
        this.initEcharts();
        this.echartsShow = true;
      }, 1000);
    },
    // 抽屉关闭
    handleClose() {},
    // 筛选数据
    goSearch() {
      this.pageNum = 1;
      this.getUserList();
    },
    // 初始化ecarts
    initEcharts() {
      let res = {
        code: 200,
        data: {
          countId: null,
          current: 1,
          hitCount: false,
          maxLimit: null,
          optimizeCountSql: true,
          orders: [],
          pages: 10,
          searchCount: true,
          size: 10,
          total: 30,
          records: [
            {
              checkResult: "血氧正常; 脉率正常; 正常血压; ",
              checkUrl:
                "https://wisemedical.creative-sz.com/report/toHealthReport?id=745ccd4a94904bedb6f3fff731df5398",
              createTime: "2022-06-28T10:54:59.000+00:00",
              createdBy: "司炜",
              createdDate: "Tue Jun 28 18:54:21 CST 2022",
              diastolic: "77.0",
              ecgResult: null,
              ecgUrl: null,
              gluType: null,
              glucose: 1,
              glucoseResult: null,
              heartRate: null,
              heartRateResult: null,
              idCardNo: "33082419750716303X",
              machineCode: "8b88f7a21b2ad892",
              olderId: 28,
              oxygen: "97.0",
              oxygenResult: "正常",
              pressureResult: "正常",
              pulse: "75.0",
              pulseResult: "正常",
              status: 1,
              supplierCode: "BC16Z3C5",
              systolic: "123.0",
              tel: "13665701009",
              telecomId: "1541736920490110977",
              temperature: 4,
              temperatureResult: null,
              updateTime: "2022-06-28T10:54:59.000+00:00",
            },
            {
              checkResult: "正常血压; ",
              checkUrl:
                "https://wisemedical.creative-sz.com/report/toHealthReport?id=fbee83b32bdc4cfb8c8fbc38308422bc",
              createTime: "2022-06-28T11:14:59.000+00:00",
              createdBy: "司炜",
              createdDate: "Tue Jun 28 19:14:38 CST 2022",
              diastolic: "77.0",
              ecgResult: null,
              ecgUrl: null,
              gluType: null,
              glucose: 2,
              glucoseResult: null,
              heartRate: null,
              heartRateResult: null,
              idCardNo: "330822195312260049",
              machineCode: "8b88f7a21b2ad892",
              olderId: 29,
              oxygen: null,
              oxygenResult: null,
              pressureResult: "正常",
              pulse: null,
              pulseResult: null,
              status: 1,
              supplierCode: "BC16Z3C5",
              systolic: "120.0",
              tel: "15857028732",
              telecomId: "1541741953210314754",
              temperature: 5,
              temperatureResult: null,
              updateTime: "2022-06-28T11:14:59.000+00:00",
            },
            {
              checkResult: "血氧正常; 脉率正常; 1级高血压; ",
              checkUrl:
                "https://wisemedical.creative-sz.com/report/toHealthReport?id=b89c5e1d08454425a1d7054081279d38",
              createTime: "2022-07-01T02:00:04.000+00:00",
              createdBy: "司炜",
              createdDate: "Wed Jun 29 16:47:58 CST 2022",
              diastolic: "91.0",
              ecgResult: null,
              ecgUrl: null,
              gluType: null,
              glucose: 3,
              glucoseResult: null,
              heartRate: null,
              heartRateResult: null,
              idCardNo: "330822198201024223",
              machineCode: "8b88f7a21b2ad892",
              olderId: 31,
              oxygen: "99.0",
              oxygenResult: "正常",
              pressureResult: "正常",
              pulse: "77.0",
              pulseResult: "正常",
              status: 1,
              supplierCode: "BC16Z3C5",
              systolic: "116.0",
              tel: "15857028732",
              telecomId: "1542689453761036289",
              temperature: 6,
              temperatureResult: null,
              updateTime: "2022-07-01T02:00:04.000+00:00",
            },
          ],
        },
        msg: "操作成功",
      };
      console.warn("Test data，Remember to hide");

      if (res.code == 200) {
        try {
          res.data.records.forEach((item, index) => {
            item["_createTime"] = this.doCreateTimeFn(item, "YYYY-MM-DD HH:mm");
            item["_createTime2"] = this.doCreateTimeFn(item, "YYYY-MM-DD");
          });
          let records = res.data.records;
          console.log("records", records);
          let systolicTimeArr = [];
          let systolic = [];
          let diastolicTimeArr = [];
          let diastolic = [];
          let pulseTimeArr = [];
          let pulse = [];
          let oxygenTimeArr = [];
          let oxygen = [];
          let glucoseTimeArr = [];
          let glucose = [];
          let temperatureTimeArr = [];
          let temperature = [];
          this.dataBing = "";
          let bing1 = "";
          let bing2 = "";
          let bing3 = "";
          let bing4 = "";
          let bing5 = "";
          let bing6 = "";
          records.forEach((item) => {
            if (item.systolic !== null) {
              systolicTimeArr.push(item._createTime2);
              let num = Math.floor(Math.random() * (90 - 150)) + 150;
              // diastolic.push(item.systolic)
              if (num > 140) {
                bing1 = "高血压(收缩压较高);";
              }
              systolic.push(num);
            }
            if (item.diastolic !== null) {
              diastolicTimeArr.push(item._createTime2);
              let num = Math.floor(Math.random() * (60 - 100)) + 100;
              // diastolic.push(item.diastolic)
              if (num > 90) {
                bing2 = "高血压(舒张压较高);";
              }
              diastolic.push(num);
            }
            if (item.pulse !== null) {
              pulseTimeArr.push(item._createTime2);
              // pulse.push(item.pulse)
              let num = Math.floor(Math.random() * (60 - 100)) + 100;
              pulse.push(num);
            }
            if (item.oxygen !== null) {
              oxygenTimeArr.push(item._createTime2);
              // oxygen.push(item.oxygen)
              let num = Math.floor(Math.random() * (98 - 100)) + 100;
              oxygen.push(num);
            }
            if (item.glucose !== null) {
              glucoseTimeArr.push(item._createTime2);
              // glucose.push(item.glucose)
              let num = Math.floor(Math.random() * (39 - 90)) + 90;
              if (num > 78) {
                bing5 = "高血糖;";
              }
              num = num / 10;
              glucose.push(num);
            }
            if (item.temperature !== null) {
              temperatureTimeArr.push(item._createTime2);
              // temperature.push(item.temperature)
              let num = Math.floor(Math.random() * (362 - 368)) + 368;
              num = num / 10;
              temperature.push(num);
            }
          });
          this.dataBing = bing1 + bing2 + bing3 + bing4 + bing5;
          console.log("records", records);
          this.healthRecords = records;

          // 收缩压
          this.echartsOpions1.series[0].data = systolic;
          this.echartsOpions1.xAxis[0].data = systolicTimeArr;
          // 舒张压
          this.echartsOpions1.series[1].data = diastolic;
          if (systolic.length == 0 && diastolic.length == 0) {
            // $('#_elder_healthMonitor_echartsBox1').hide()
          } else {
            this.myCharts1 = echarts.init(
              document.getElementById("_elder_healthMonitor_echartsBox1")
            );
            this.myCharts1.setOption(this.echartsOpions1);
          }

          // 脉率
          this.echartsOpions2.series[0].data = pulse;
          this.echartsOpions2.xAxis[0].data = pulseTimeArr;
          console.log("pulse", pulse);
          if (pulse.length == 0) {
            // $('#_elder_healthMonitor_echartsBox2').hide()
          } else {
            this.myCharts2 = echarts.init(
              document.getElementById("_elder_healthMonitor_echartsBox2")
            );
            this.myCharts2.setOption(this.echartsOpions2);
          }

          // 血氧
          this.echartsOpions3.series[0].data = oxygen;
          this.echartsOpions3.xAxis[0].data = oxygenTimeArr;
          if (oxygen.length == 0) {
            // $('#_elder_healthMonitor_echartsBox3').hide()
          } else {
            this.myCharts3 = echarts.init(
              document.getElementById("_elder_healthMonitor_echartsBox3")
            );
            this.myCharts3.setOption(this.echartsOpions3);
          }

          // 血糖
          this.echartsOpions4.series[0].data = glucose;
          this.echartsOpions4.xAxis[0].data = glucoseTimeArr;
          if (glucose.length == 0) {
            // $('#_elder_healthMonitor_echartsBox4').hide()
          } else {
            this.myCharts4 = echarts.init(
              document.getElementById("_elder_healthMonitor_echartsBox4")
            );
            this.myCharts4.setOption(this.echartsOpions4);
          }

          // 体温
          this.echartsOpions5.series[0].data = temperature;
          this.echartsOpions5.xAxis[0].data = temperatureTimeArr;
          if (temperature.length == 0) {
            // $('#_elder_healthMonitor_echartsBox5').hide()
          } else {
            this.myCharts5 = echarts.init(
              document.getElementById("_elder_healthMonitor_echartsBox5")
            );
            this.myCharts5.setOption(this.echartsOpions5);
          }

          // // 都是空值，内容置空
          // if (systolic.length == 0
          //   && diastolic.length == 0
          //   && pulse.length == 0
          //   && oxygen.length == 0
          //   && glucose.length == 0
          //   && temperature.length == 0) {
          //   this.noDataEchartsHideAll()
          // }
        } catch (err) {
          console.log(err);
        }
      }
    },

    // 判断时间，如果有createTime，使用createTime，没有的话使用createdDate（此时间为：Tue Oct 18 17:31:44 CST 2022，CST时间格式，需要特殊处理），如果都没有则置空
    doCreateTimeFn(data, format) {
      if (data.createTime) {
        // item.createTime ? dayjs(item.createTime).format("YYYY-MM-DD") : ''
        // return dayjs(data.createTime).format('YYYY-MM-DD HH:mm')
        return dayjs(data.createTime).format(format);
      } else if (data.createdDate) {
        let timeDiff = 14;
        return dayjs(data.createdDate)
          .add(-timeDiff, "hour")
          .format("YYYY-MM-DD HH:mm");
      } else {
        return "";
      }
    },
    // 随机获取老人慢性病
    getBingFn() {
      let arr = ["冠心病", "慢性支气管炎", "哮喘", "慢性胃炎", "痛风"];
      let index =
        Math.floor(Math.random() * (0 - (arr.length - 1))) + (arr.length - 1);
      return arr[index];
    },
  },

  created() {
    this.switchData();

    setInterval(() => {
      this.currentTime = this.$base.timeSwitch(new Date(), true);
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  padding: 0 0 20px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #29243d;
}

.el-header {
  min-height: 5vh;
  margin: 0 20px;
  padding: 10px 20px;
  width: 100vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #29243d;

  .logo {
    height: 5vh;
    box-sizing: border-box;
  }

  h3 {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
  }

  .screen-title {
    color: #ffffff;
    margin-right: 12px;
    width: 200px;
    text-align: right;

    p {
      font-size: 14px;
      letter-spacing: 1px;
    }
  }
}
header {
  position: fixed;
  z-index: 3;
  left: -20px;
  width: 100%;
  color: #fff;
  padding: 20px 40px;
  border-bottom: 1px solid #ccc;
}
.page-header-box {
  color: #fff;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.data-list {
  margin: 20px;
}

.page {
  width: 800px;
  font-size: 16px;
  margin: 10px auto;
  text-align: center;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 48px;
  width: 40%;
}

.data-list-filter-box {
  padding: 20px 0;
  display: flex;
}

.filter-list {
  display: flex;
  align-items: center;
  margin-right: 25px;

  .filter-label {
    margin-right: 10px;
    color: #fff;
  }

  .filter-value {
    width: 200px;
  }
}

.drawer-container {
  padding: 0 20px 50px 20px;

  .drawer-title {
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 30px;
  }

  .drawer-content {
    font-size: 18px;
    padding: 0 20px;

    .form-ul {
      display: flex;
      flex-wrap: wrap;
    }

    ._elder_healthMonitor_echartsBox {
      width: 400px;
      height: 330px;
      margin: 0 20px;
      display: inline-block;
    }
  }

  .form-list {
    flex: 0 0 280px;
    margin-right: 20px;
    margin-bottom: 30px;
    display: flex;

    // align-items: center;
    .form-label {
      // flex: 0 0 100px;
    }

    .form-value {
      flex: 1;
    }
  }

  .big-lable {
    font-size: 22px;
  }

  .form-list-all-line {
    flex: 0 0 100%;
    width: 100%;
  }
  .form-lable {
    width: 120px;
    text-align: right;
  }
  .form-value {
    width: 100px;
  }
}
</style>
<style lang="scss">
#_data-list {
  .el-drawer__header {
    font-size: 30px;
    font-weight: bold;
  }

  .el-timeline {
    .el-timeline-item {
      padding-bottom: 20px;
    }
  }
}
</style>